import React, { Suspense } from "react";
import { useRoutes } from "react-router-dom";
import {
  HomeOutlined,
  UnorderedListOutlined,
  KeyOutlined,
  CommentOutlined,
  SettingOutlined,
} from "@ant-design/icons";
const Home = React.lazy(() => import("../view/home"));
const Homea = React.lazy(() => import("../view/homea"));
const Homeb = React.lazy(() => import("../view/homeb"));
const Homec = React.lazy(() => import("../view/homec"));
const Homed = React.lazy(() => import("../view/homed"));
const Homee = React.lazy(() => import("../view/homee"));
const Homef = React.lazy(() => import("../view/homef"));
const Homeg = React.lazy(() => import("../view/homeg"));
const Login = React.lazy(() => import("../view/login"));
const MainLayout = React.lazy(() => import("../view/mainLayout"));



const RouterListChildren = [
  {
    path: "/",
    element: <Home></Home>,
    meta: { title: "首页", icon: <HomeOutlined /> },
  },
  {
    path: "/homea",
    meta: { title: "列表管理", icon: <UnorderedListOutlined />, isLogin: true },
    children: [
      {
        path: "/homea/a",
        element: <Homea></Homea>,
        meta: { title: "列表添加" },
      },
      {
        path: "/homea/b",
        element: <Homeb></Homeb>,
        meta: { title: "列表管理", role: ["admin"] },
      },
      {
        path: "/homea/c",
        element: <Homec></Homec>,
        meta: { title: "列表查询", role: ["admin"] },
      },
    ],
  },
  {
    path: "/homeb",
    meta: { title: "权限管理", icon: <KeyOutlined />, role: ["admin"] },
    children: [
      {
        path: "/homeb/d",
        element: <Homed></Homed>,
        meta: { title: "权限添加" },
      },
      {
        path: "/homeb/e",
        element: <Homee></Homee>,
        meta: { title: "权限编辑" },
      },
    ],
  },
  {
    path: "/homec",
    element: <Homef></Homef>,
    meta: { title: "消息管理", icon: <CommentOutlined />, isLogin: true },
  },
  {
    path: "/homed",
    element: <Homeg></Homeg>,
    meta: { title: "系统设置", icon: <SettingOutlined />, role: ["admin"] },
  },
];

const RouterList = [
  {
    path: "/",
    element: <MainLayout></MainLayout>,
    children: RouterListChildren,
  },
  {
    path: "/login",
    element: <Login></Login>,
  },
];

const Router = () => {
  const RouterView = () => useRoutes(RouterList);
  return (
    <Suspense fallback={<div>路由加载中...</div>}>
      <RouterView></RouterView>
    </Suspense>
  );
};

export { RouterListChildren, Router };
